<template>
  <div>
    <el-collapse accordion>
      <el-collapse-item v-for="(i,index) in collapseList" :key="index">
        <template slot="title">
          <div class="title">
            <div>{{i.title}}</div>
            <div>{{i.name}}</div>
            <div>{{i.phone}}</div>
          </div>
        </template>
        <el-table
          :data="i.tableData"
          border
          center
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column key="id" align="center" prop="id" label="ID" width="180"> </el-table-column>
          <el-table-column key="name" prop="name" label="姓名"> </el-table-column>
          <el-table-column key="amount1" prop="amount1" label="数值 1（元）"> </el-table-column>
          <el-table-column key="amount2" prop="amount2" label="数值 2（元）"> </el-table-column>
          <el-table-column key="amount3" prop="amount3" label="数值 3（元）"> </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  name: "elTableMergeColumn",
  data() {
    return {
      collapseList:[
        {
          title:'大洼区水利局南河',
          name:'王明明',
          phone:'18812428462',
          tableData: [
            {
              id: "12987122",
              name: "王小虎",
              amount1: "234",
              amount2: "3.2",
              amount3: 10,
              num:2,
            },
            {
              id: "12987123",
              name: "王小虎",
              amount1: "165",
              amount2: "4.43",
              amount3: 12,
              num:0,

            },
            {
              id: "12987124",
              name: "王小虎",
              amount1: "324",
              amount2: "1.9",
              amount3: 9,
              num:1,

            },
            {
              id: "12987125",
              name: "王小虎",
              amount1: "621",
              amount2: "2.2",
              amount3: 17,
              num:1,

            },
            {
              id: "12987126",
              name: "王小虎",
              amount1: "539",
              amount2: "4.1",
              amount3: 15,
              num:1,

            },
          ]
        },
        {
          title:'大洼区水利局南河',
          name:'王明明',
          phone:'18812428462',
          tableData: [
            {
              id: "12987122",
              name: "王小虎",
              amount1: "234",
              amount2: "3.2",
              amount3: 10,
              num:2,
            },
            {
              id: "12987123",
              name: "王小虎",
              amount1: "165",
              amount2: "4.43",
              amount3: 12,
              num:0,

            },
            {
              id: "12987124",
              name: "王小虎",
              amount1: "324",
              amount2: "1.9",
              amount3: 9,
              num:1,

            },
            {
              id: "12987125",
              name: "王小虎",
              amount1: "621",
              amount2: "2.2",
              amount3: 17,
              num:1,

            },
            {
              id: "12987126",
              name: "王小虎",
              amount1: "539",
              amount2: "4.1",
              amount3: 15,
              num:1,

            },
          ]
        },
        {
          title:'大洼区水利局南河',
          name:'王明明',
          phone:'18812428462',
          tableData: [
            {
              id: "12987122",
              name: "王小虎",
              amount1: "234",
              amount2: "3.2",
              amount3: 10,
              num:2,
            },
            {
              id: "12987123",
              name: "王小虎",
              amount1: "165",
              amount2: "4.43",
              amount3: 12,
              num:0,

            },
            {
              id: "12987124",
              name: "王小虎",
              amount1: "324",
              amount2: "1.9",
              amount3: 9,
              num:1,

            },
            {
              id: "12987125",
              name: "王小虎",
              amount1: "621",
              amount2: "2.2",
              amount3: 17,
              num:1,

            },
            {
              id: "12987126",
              name: "王小虎",
              amount1: "539",
              amount2: "4.1",
              amount3: 15,
              num:1,

            },
          ]
        },
      ],
    };
  },

  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return {
          rowspan:row.num,
          colspan: 1
        }
      }
    },

  },

  watch: {},
  computed: {},

  created() {},
  mounted() {
  },
  beforeDestroy() {},
};
</script>

<style scoped lang="less">
.title{
  display: flex;
}
.title div{
  margin-left: 30px;

}
/deep/ .el-collapse-item__arrow {
  position: absolute;
  left: 20px;
}
</style>